<template>
  <div class="datav_map">
    <div class="datav_map_img">
      <img src="./../../assets/img/index/datav_new_bj.png" alt />
    </div>
    <div class="datav_map_content">
      <div class="datav_part_title">
        <span>会员新增数据统计</span>
      </div>
      <div class="datav_map_p">
        昨日新增会员：
        <b>{{datalist[1].number}}</b>个 今日新增会员：
        <b>{{datalist[0].number}}</b>个
        <!-- {{dataInfo.user_day}} -->
      </div>
      <div id="datav_new" style="width:100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
  export default {
    name: "datav_map",
    data() {
      return {};
    },
    props: {
      datalist: {
        type: Array,
        default: () => {
         []
        }
      }
    },
    components: {},
    mounted() {
      // console.log(this.datalist)
      var that = this;
      this.$nextTick(() => {
        that.get_datanew();
      });
    },
    methods: {
      get_datanew() {
        let day = [];
        let number = [];
        var that = this;
        for(let i=0;i<this.datalist.length;i++){
          var index = (this.datalist[i].day.lastIndexOf("-")+1);
          var d = this.datalist[i].day.slice(index,this.datalist[i].day.length) + "日";
          day.push(d);
          number.push(this.datalist[i].number);
        }
        // console.log("wwwwwwwwwwwwwww:",day);
        // console.log("eeeeeeeeeeeeeeeeeeeee:",number);
        var option = {
          title: {
            text: "",
            textStyle: {
              align: "center",
              color: "#fff",
              fontSize: 20
            },
            top: "3%",
            left: "10%"
          },
          backgroundColor: "transparent",
          //   backgroundColor: 'pink',
          grid: {
            top: "15%",
            bottom: "15%",
            left: "5%",
            right: "5%"
          },
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow",
              label: {
                show: true
              }
            },

            formatter: function(data) {
              console.log(data);
              return (
                data.marker + data.name + data.seriesName + "：" + data.value
              ); //将小数转化为百分数显示
            }
          },
          // legend: {
          //     data: [ "新增会员数"],
          //     top: "15%",
          //     textStyle: {
          //         color: "#ffffff"
          //     }
          // },
          xAxis: {
            data: day,
            axisLine: {
              show: true //隐藏X轴轴线
            },
            axisTick: {
              show: true //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#ffffff" //X轴文字颜色
              }
            },
            axisLine: {
              lineStyle: {
                color: "#ffffff"
              }
            }
          },
          yAxis: [{
              type: "value",
              name: "人数",
              nameTextStyle: {
                color: "#ffffff"
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: true
              },
              axisLine: {
                show: true
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#FFFFFF"
                }
              },
              axisLine: {
                lineStyle: {
                  color: "#FFFFFF"
                }
              }
            },
            // {
            //     type: "value",
            //     name: "同比",
            //     nameTextStyle: {
            //         color: "#ebf8ac"
            //     },
            //     position: "right",
            //     splitLine: {
            //         show: false
            //     },
            //     splitLine: {
            //         show: false
            //     },
            //     axisTick: {
            //         show: false
            //     },
            //     axisLine: {
            //         show: false
            //     },
            //     axisLabel: {
            //         show: true,
            //         formatter: "{value} %", //右侧Y轴文字显示
            //         textStyle: {
            //             color: "#ebf8ac"
            //         }
            //     }
            // },
            {
              type: "value",
              gridIndex: 0,
              min: 50,
              max: 100,
              splitNumber: 8,
              splitLine: {
                show: false
              },
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"]
                }
              }
            }
          ],
          series: [{
              name: "新增会员数",
              type: "line",
              // yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
              smooth: true, //平滑曲线显示
              showAllSymbol: true, //显示所有图形。
              symbol: "circle", //标记的图形为实心圆
              symbolSize: 10, //标记的大小
              itemStyle: {
                //折线拐点标志的样式
                color: "#058cff"
              },
              lineStyle: {
                color: "#058cff"
              },
              areaStyle: {
                color: "rgba(5,140,255, 0.2)"
              },
              data: number
            },
            {
              name: "新增会员数",
              type: "bar",
              barWidth: 15,
              itemStyle: {
                normal: {
                  color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                      offset: 0,
                      color: "#00FFE3"
                    },
                    {
                      offset: 1,
                      color: "#4693EC"
                    }
                  ])
                }
              },
              data: number
            }
          ]
        };
        var myChart = this.$echarts.init(document.getElementById("datav_new"));
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function() {
          myChart.resize();
        });
      }
    }
  };
</script>
<style lang="less" scoped>
  .datav_map {
    width: 100%;
    position: relative;

    .datav_map_img {
      width: 100%;

      img {
        // width: 100%;
        height: 100%;
      }
    }

    .datav_map_content {
      width: 100%;
      padding: 10px 20px 20px 20px;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-flow: column;

      .datav_part_title {
        width: 100%;
      }

      .datav_map_p {
        width: 100%;
        font-size: 12px;
        color: #fff;
        line-height: 26px;
        text-align: left;
      }

      .datav_map_body {
        width: 100%;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        padding-top: 20px;
      }
    }
  }
</style>
